<!--
 * @Date: 2025-10-06 14:21:08
 * @Description: 选择门店封装（适用于el-form）
 * @LastEditTime: 2025-10-07 00:04:10
-->
<template>
  <div class="select-store">
    <el-form :model="ruleForm" label-width="150px">
      <el-form-item label="门店范围：">
        <el-radio-group v-model="ruleForm[storeScopeKeyName]" :disabled="disabled">
          <el-radio-button label="0">通用</el-radio-button>
          <el-radio-button label="1">指定门店</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="适用门店：" v-if="ruleForm[storeScopeKeyName] == '1'">
        <el-table :data="shopList" border style="font-size: 10px; width: 100%" height="300px"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
          <el-table-column prop="authCode" label="授权码" width="180" header-align="center"></el-table-column>
          <el-table-column prop="storeName" label="店铺名称" width="180" header-align="center"></el-table-column>
          <el-table-column prop="storeOwnerName" label="店主姓名" width="100" header-align="center">
          </el-table-column>
          <el-table-column prop="storeAddressDetail" label="店铺地址" header-align="center"></el-table-column>
          <el-table-column label="操作" width="80px">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="deleteStore(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin-top: 10px">
          <el-button type="primary" @click="selectShop('couponForm')" v-if="!disabled">选择门店</el-button>
        </div>
      </el-form-item>
    </el-form>

    <!-- 选择门店 -->
    <el-dialog title="选择门店" :visible.sync="dialogVisibleShop" width="65%" @opened="opened">
      <el-form :inline="true" :model="formShop" class="search-form-inline">
        大区：
        <el-select v-model="formShop.warzone">
          <el-option value>全部大区</el-option>
          <el-option v-for="item in warzoneList" :key="item.orgSeq" :label="item.orgName"
            :value="item.orgSeq"></el-option>
        </el-select>
        <el-input v-model="formShop.shopName" style="width: 200px" placeholder="店铺名称"></el-input>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="getShopList(1)">查询</el-button>
      </el-form>
      <el-table ref="shopTableRef" :data="orgDTOS" border style="font-size: 10px; width: 100%; margin-top: 15px;"
        height="300" @selection-change="shopChecked" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
        <el-table-column type="selection" width="55" align="center" :selectable="selectableHandle"></el-table-column>
        <el-table-column prop="authCode" label="授权码" width="180" header-align="center"></el-table-column>
        <el-table-column prop="storeName" label="店铺名称" width="180" header-align="center"></el-table-column>
        <el-table-column prop="storeOwnerName" label="店主姓名" width="100" header-align="center"></el-table-column>
        <el-table-column prop="storeAddressDetail" label="店铺地址" header-align="center"></el-table-column>
      </el-table>
      <div class="block" style="margin-top: 5px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50, 100]" :current-page="listQuery.current" :page-size="listQuery.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleShop = false">取 消</el-button>
        <el-button type="primary" @click="shopConfirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryStoreInfo, getWarzoneList } from "@/api/preSaleActivity";

export default {
  name: 'SelectStore',
  props: {
    modelValue: {
      type: Object,
      default: () => ({})
    },
    storeScopeKeyName: {
      type: String,
      default: 'isStore'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    storeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisibleShop: false,
      formShop: {
        warzone: '',
        shopName: ''
      },
      warzoneList: [],
      orgDTOS: [],
      listQuery: {
        current: 1,
        size: 10,
      },
      total: 0,
      loading: false,
      checkedList: []
    };
  },

  computed: {
    ruleForm: {
      get() {
        return this.modelValue || { [this.storeScopeKeyName]: '0' }
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    },

    shopList: {
      get() {
        return this.storeList || []
      },
      set(val) {
        console.log('~🚀🚀🚀🚀~🚀🚀🚀🚀~🚀🚀🚀🚀~ ~ val:', val);
        this.$emit('update:storeList', val)
      }
    }
  },

  methods: {
    deleteStore(index, row) {
      this.shopList.splice(index, 1);
    },
    selectShop() {
      this.dialogVisibleShop = !this.dialogVisibleShop;
    },
    opened() {
      this.formShop.warzone = '';
      this.formShop.shopName = '';
      this.getShopList(1);
      this.getWarzoneList();
    },
    getShopList(current) {
      const data = {
        size: this.listQuery.size,
        current: current,
        condition: {
          upOrgSeq: this.formShop.warzone,
          storeName: this.formShop.shopName,
        },
        ascs: [],
        descs: [],
      };
      queryStoreInfo(data).then((res) => {
        this.orgDTOS = res.records;
        this.total = res.total;
      })
    },
    getWarzoneList() {
      const data = {};
      getWarzoneList(data).then((res) => {
        this.warzoneList = res.records;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getShopList(1);
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getShopList(val);
    },
    shopChecked(val) {
      this.checkedList = val;
    },
    selectableHandle(row) {
      const res = this.shopList.some((item) => item.orgSeq == row.orgSeq)
      return !res
    },
    shopConfirm() {
      this.shopList = this.shopList.concat(this.checkedList);
      this.dialogVisibleShop = false;
    }
  },
}
</script>

<style lang="less" scoped>
.select-store {}
</style>